<template>
  <div :class="['bg', props.pageType === 'pc' ? 'bg-pc' : 'bg-mobile']">
    <div class="head">智能助手是否解决了您的问题？</div>
    <div class="rate-content">
      <div
        :class="[
          'rate-item2 flex-c-c',
          props.pageType === 'pc' ? 'rate-item-pc' : 'rate-item-mobile',
          state.value === 1 ? 'select' : ''
        ]"
        @click="handleSelect(1)"
      >
        <img :src="robotRate1" alt="" />
        <div><span>已解决</span></div>
      </div>
      <div
        :class="[
          'rate-item2 flex-c-c',
          props.pageType === 'pc' ? 'rate-item-pc' : 'rate-item-mobile',
          state.value === 0 ? 'select' : ''
        ]"
        @click="handleSelect(0)"
      >
        <img :src="robotRate0" alt="" />
        <span>未解决</span>
      </div>
    </div>
    <div class="action-btn" v-if="!rated">
      <el-button
        :class="['send-btn', pageType == 'pc' ? 'pc-send-btn' : 'mobile-send-btn']"
        @click="commit()"
        >提交评价</el-button
      >
    </div>
  </div>
</template>
<script setup lang="ts">
import robotRate0 from '@/assets/images/robot_rate0.png';
import robotRate1 from '@/assets/images/robot_rate1.png';
import uniChat from '@/lib';
import { reactive, ref, watch } from 'vue';

const props = defineProps({
  //页面展示类型  pc  mobile
  pageType: {
    type: String,
    default: 'pc'
  },
  chatSessionId: {
    type: String,
    default: ''
  }
});

const rated = ref(false);

watch(
  () => props.chatSessionId,
  (val) => {
    uniChat
      .isRate(val)
      .then((res) => {
        if (res) {
          rated.value = true;
          return;
        } else {
          rated.value = false;
        }
      })
      .catch(() => {
        rated.value = false;
      });
  },
  { immediate: true }
);

const emits = defineEmits(['submitRate']);

const state = reactive({
  visible: false,
  value: 1
});
function handleSelect(val: any) {
  if (rated.value) {
    return;
  }
  state.value = val;
}
function commit() {
  state.visible = false;
  rated.value = true;
  emits('submitRate', { score: state.value, chatSessionId: props.chatSessionId });
}
function show() {
  state.visible = true;
}
defineExpose({
  show
});
</script>
<style lang="scss" scoped>
.bg {
  padding: 16px 12px;
  border-radius: 8px;
  border: 1px solid #dee0e3;
  background: white;

  .head {
    color: #333333;
    font-family: 'PingFang SC';
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
  }
}
.bg-mobile {
  width: 300px;
}
.bg-pc {
  width: 440px;
}
.rate-content {
  width: 100%;
  display: flex;
  align-items: center;
  height: fit-content;
  padding: 12px 20px;

  .rate-item2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 18px !important;
    height: 36px;
    line-height: 36px;
    margin: 0px 8px;
    cursor: pointer;
    color: #666666;
    border: 1px solid #dadada;
    img {
      width: 20px;
      height: 20px;
    }
  }
  .rate-item-pc {
    width: 72px;
  }
  .rate-item-mobile {
    width: 90px;
  }
  .select {
    border: var(--el-border);
    background: #eaf1ff !important;
    color: #2b72fe !important;
  }
  .robot-rate-cn {
    padding: 20px 0px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
  }
  .radio-btn-cn {
    width: 100%;
    justify-content: space-evenly;
  }
}

.action-btn {
  margin-top: 12px;
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;

  .send-btn {
    background-color: white;
    color: var(--color-main-theme, #2b72fe);
    border-color: var(--color-main-theme, #2b72fe);
    font-size: 14px;
  }

  .pc-send-btn {
    width: 86px;
  }

  .mobile-send-btn {
    width: 100%;
  }
}
</style>
